<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <!-- 告诉IE使用最新的引擎渲染网页 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>${news.title}</title>
	<link rel="stylesheet" type="text/css" href="${BasePath}/share/plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="${BasePath}/share/plugins/swiper-4.3.3/css/swiper.min.css">
	<link rel="stylesheet" type="text/css" href="${BasePath}/share/css/base.css">
	<script type="text/javascript" src="${BasePath}/sharejs/rem.js"></script>
	<style type="text/css">
		.swiper-container {
			margin-top: 2rem;
			width: 100%;
			height: 100%;
		}
		.swiper-slide {
			width: 100%;
			height: 21.6rem;
			text-align: center;
			font-size: 1.8rem;
			background: #fff;

			/* Center slide text vertically */
			display: -webkit-box;
			display: -ms-flexbox;
			display: -webkit-flex;
			display: flex;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			-webkit-justify-content: center;
			justify-content: center;
			-webkit-box-align: center;
			-ms-flex-align: center;
			-webkit-align-items: center;
			align-items: center;
		}
		.swiper-slide img {
			width: 100%;
			height: 100%;
		}
		article {
			margin-top: 2rem;
			color: #666;
			font-size: 1.7rem;
			line-height: 1.5em;
		}
		article img {
			display: block;
			max-width: 100%;
			margin: 1rem auto;
		}
		article p {
			margin: 1rem 0;
			text-indent: 2em;
		}
	</style>
</head>
<body>
<div class="container">
	<!-- <header><h1>新闻标题</h1></header> -->
		<!-- Swiper -->
	<div class="swiper-container">
	    <div class="swiper-wrapper" id="wrapper">
			<#list imgList as images>
				<div class="swiper-slide"><img src="${images.imgPath}"></div>
			</#list>
	        <!--<div class="swiper-slide"><img src="${BasePath}/share/images/pic/banner1.png"></div>-->
	        <!--<div class="swiper-slide"><img src="${BasePath}/share/images/pic/banner2.jpeg"></div>-->
	    </div>
	    <!-- Add Pagination -->
	    <div class="swiper-pagination"></div>
	</div>
	<article id="article">
		<div><span style="color: #999999;padding-right: 10px;font-size: small;">好氧头条</span>
			<div style="color: #999999;text-align: right;padding-right: 10px;font-size: small;float: right;">${news.createTime?string("yyyy-MM-dd HH:mm:ss")}</div>
		</div>
		<p>${news.content}</p>
	</article>
</div>
<script type="text/javascript" src="${BasePath}/share/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="${BasePath}/share/plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="${BasePath}/share/plugins/swiper-4.3.3/js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
	$(function(){
	    // var id = getQueryString('id');
	    // createNews(id);
        var swiper = new Swiper('.swiper-container', {
            autoplay: true,
            pagination: {
                clickable :true,
                el: '.swiper-pagination',
            },
        });
	});
    function getQueryString(name) {
        var result = window.location.search.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i"));
        if (result == null || result.length < 1) {
            return "";
        }
        return result[1];
    }

    function createNews(id){
        var requestData = {requestData: JSON.stringify({id:id})};

        $.ajax({
            type : "post",
            // url : "${BasePath}/api/news/detail?id="+id,
            url : "${BasePath}/api/news/detail",
            data: JSON.stringify(requestData),
            dataType : "json",
            //async : false,
            //contentType : "application/json", // 重要否则POST会报错
            contentType : "application/json; charset=utf-8",
            success : function(res) {
                var data = JSON.parse(res.responseData);
                console.log(data);
                var imgList = data.imgList;
                var slideStr = '';
                for(var i=0,len=imgList.length;i<len;i++){
                    slideStr += '<div class="swiper-slide"><img src="'+imgList[i].imgPath+'"></div>';
				}
				$("#wrapper").html(slideStr);
                $("#article").html(data.news.content);
                var swiper = new Swiper('.swiper-container', {
                    autoplay: true,
                    pagination: {
                        clickable :true,
                        el: '.swiper-pagination',
                    },
                });
            },
            error : function() {
                console.log("数据加载错误");
            }
        });
	}

</script>
</body>
</html>